import 'dart:ui';

import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pet_app/routes/router.dart';

import 'logic.dart';

class CardSwiperPage extends StatelessWidget {
  CardSwiperPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<CardSwiperLogic>();
    return GetBuilder<CardSwiperLogic>(builder: (logic) {
      if (logic.breedList.isEmpty) {
        return const Center(
            // child: Text('未查询到数据'),
            );
      } else {
        return Stack(children: [
          Positioned.fill(
              child: FadeTransition(
            opacity: logic.fadeOutAnimation,
            child: GetBuilder<CardSwiperLogic>(
                id: 'background',
                builder: (logic) {
                  return Image.network(
                    logic.breedList[logic.preIndex].imageUrl!,
                    fit: BoxFit.fill,
                  );
                }),
          )),
          Positioned.fill(
              child: FadeTransition(
            opacity: logic.fadeInAnimation,
            child: GetBuilder<CardSwiperLogic>(
                id: 'background',
                builder: (logic) {
                  return Image.network(
                    logic.breedList[logic.index].imageUrl!,
                    fit: BoxFit.fill,
                  );
                }),
          )),
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
            child: Container(),
          ),
          SafeArea(
            child: Align(
              alignment: Alignment.center,
              child: SizedBox(
                height: 0.6.sh,
                child: Swiper(
                  itemCount: logic.breedList.length,
                  onIndexChanged: (index) {
                    logic.changeIndex(index);
                  },
                  itemBuilder: (context, index) {
                    return _buildCard(logic, index);
                  },
                  pagination: const SwiperPagination(
                      builder: DotSwiperPaginationBuilder(
                          activeColor: Colors.black54)),
                  outer: true,
                  viewportFraction: 0.8,
                  scale: 0.9,
                ),
              ),
            ),
          ),
          Positioned(
              bottom: 18,
              left: 0,
              right: 0,
              child: GestureDetector(
                onTap: () => Get.back(closeOverlays: true),
                child: const CircleAvatar(
                  radius: 16, // 半径
                  backgroundColor: Colors.black38, // 背景颜色
                  child: Icon(
                    Icons.close_rounded,
                    color: Colors.white,
                    size: 20,
                  ),
                  // 点击事件
                ),
              ))
        ]);
      }
    });
  }

  Widget _buildCard(CardSwiperLogic logic, int index) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 6.0),
      child: GestureDetector(
        onTap: () => Get.toNamed(AppRoutes.articleDetail,
            arguments: {'breedId': logic.breedList[index].breedId}),
        child: Card(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          elevation: 5,
          child: Stack(
            children: [
              Positioned.fill(
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.network(
                    logic.breedList[index].imageUrl!+'?x-oss-process=image/resize,p_30',
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Container(
                    height: 100,
                    width: double.maxFinite,
                    decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.2),
                        borderRadius: const BorderRadius.only(
                            bottomLeft: Radius.circular(10),
                            bottomRight: Radius.circular(10))),
                    child: Center(
                        child: Text(
                      logic.breedList[index].name!,
                      style: const TextStyle(fontSize: 28, color: Colors.white),
                    )),
                  )),
            ],
          ),
        ),
      ),
    );
  }
}
